import type { Ref } from 'vue'
import { unref } from 'vue'
import { createLoading } from './createLoading'

// Loading组件支持的属性类型
interface LoadingProps {
  text: string
  loading: boolean
  fullscreen: boolean
  className: any
}

// Hook 的参数：可传入目标DOM或配置项
export interface UseLoadingOptions {
  target?: HTMLElement | Ref<HTMLElement | null>
  props?: Partial<LoadingProps>
}

// Hook 的返回值类型：开启函数、关闭函数
type Fn = () => void

// 函数重载支持两种使用方式
export function useLoading(props: Partial<LoadingProps>): [Fn, Fn]
export function useLoading(opt: Partial<UseLoadingOptions>): [Fn, Fn]

// 核心实现
export function useLoading(opt: Partial<LoadingProps> | Partial<UseLoadingOptions>): [Fn, Fn] {
  let props: Partial<LoadingProps> = {}
  let target: HTMLElement | Ref<HTMLElement | null> = document.body

  // 判断是否为 options 对象（带 target 或 props 字段）
  if ('target' in opt || 'props' in opt) {
    const options = opt as Partial<UseLoadingOptions>
    props = options.props || {}
    target = options.target || document.body
  } else {
    // 否则直接当作 props 使用
    props = opt as Partial<LoadingProps>
  }

  // 创建 Loading 实例，但暂不挂载（wait = true）
  const instance = createLoading(props, undefined, true)

  // open：将 loading 挂载到指定目标 DOM
  const open: Fn = () => {
    const el = unref(target) // 支持 Ref 或普通 DOM
    if (!el) return
    instance.open(el)
  }

  // close：关闭 loading
  const close: Fn = () => {
    instance.close()
  }

  return [open, close]
}
